<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function () {
			getData();
		})
		function getData() {
			$.ajax({
				url: "/goods/getGoods",
				type: "post",
				data:{goodsName:$("#goodsName").val()},
				async: false,//同步
				dataType: "json",
				success: function (result) {
					var goodsList = result.data;
					var table = '';

					$.each(goodsList,function (i,v) {
						table += '<tr><td><input type="checkbox" name="box" value="'+v.id+'"></td><td>'+v.id+'</td>';
						table += '<td>'+v.goodsName+'</td><td>'+v.price+'</td>';
						table += '<td>'+v.category1Name+'</td><td>'+v.category2Name+'</td><td>'+v.category3Name+'</td>';
						if (v.auditStatus == 0) {
							table += '<td><span>未审核</span></td>';
						} else if(v.auditStatus == 1){
							table += '<td><span>审核通过</span></td>';
						} else if(v.auditStatus == 2){
							table += '<td><span>审核未通过</span></td>';
						}
						table += '<td class="text-center"><button type="button" data-toggle="modal" onclick="selectById('+v.id+')" ' +
                            'data-target="#insertEditModal" class="btn bg-olive btn-xs" >详情</button></td></tr>';

					})
					$("#goodsId").html(table);
					/*pageInstall(page)*/
				},
				error: function () {
					alert.error("系统错误，请联系管理员！");
				}
			})
		}
		//审核
		function status(obj) {
			var bids=$("[name=box]");
			var ids=[];
			$(bids).each(function(i,e){
				if ($(e).prop("checked")) {
					ids.push($(e).val());
				}
			});

			if (ids.length<=0){
				alert("请选择要操作的商品");
			}
			$.ajax({
				url:"/goods/isStatus",
				data:{obj:obj,ids:ids},
				type:"post",
				dataType:"json",
				async:true,
				success:function(result){
					alert(result.message);
					window.location.reload();

				},
				error:function(){
					alert("删除失败");
				}
			})
		}
		//删除
		function deleteInfo() {

			var bids=$("[name=box]");
			var ids=[];
			$(bids).each(function(i,e){
				if ($(e).prop("checked")) {
					ids.push($(e).val());
				}
			});

			if (ids.length<=0){
				alert("请选择删除的品牌");
			}
			if (confirm("确定删除id为"+ ids +"的品牌？")) {

				$.ajax({
					url:"/goods/deleteGoods",
					data:{ids:ids},
					type:"post",
					dataType:"json",
					async:true,
					success:function(result){
						alert(result.message);
						window.location.reload();

					},
					error:function(){
						alert("删除失败");
					}
				})
			}
		}
		function selectById(id) {
            $.ajax({
                url:"/goods/selectById",
                data:{id:id},
                type:"post",
                dataType:"json",
                async:true,
                success:function(result){
                    var map = result.data;
                    alert(map);
                    console.log(map.goodsVO.goodsVO);
                    var goodsVO = map.goodsVO;
                    $("#brand").val(goodsVO.brandName);
                    $("#category1Ids").text(goodsVO.category1Name + " /");
                    $("#category2Ids").text(goodsVO.category2Name + " /");
                    $("#category3Ids").text(goodsVO.category3Name);
                    $("#goodsName1").val(goodsVO.goodsName);
                    $("#caption").val(goodsVO.caption);
                    $("#price").val(goodsVO.price);
                    $("#introduction").text(goodsVO.introduction);
                    $("#packageList").text(goodsVO.packageList);
                    $("#saleService").text(goodsVO.saleService);
                    //回显图片
                    var itemImages = JSON.parse(goodsVO.itemImages);
                    var image ="";
                    $(itemImages).each(function (i,e) {
                        image += "<tr><td><input id='colorSee' value='" + e.color + "' style='border: 0px'></td><td><img id='url' src='" + e.url + "' width='100px' height='100px'></td><td><button onclick='deleteTr(this)' type='button' class='btn btn-default' title='删除'><i class='fa fa-trash-o'></i>删除</button></td></tr>";
                    });
                    $("#imgTemplate").html(image);
                    //回显扩展属性
                    var customAttributeItems = JSON.parse(goodsVO.customAttributeItemsId);

                    var table2 = "";
                    $(customAttributeItems).each(function (i,v) {
                        table2 += "<div><div class='col-md-2 title'>" + v.text + "</div>";
                        table2 += "<div class='col-md-10 data'>";
                        table2 += "<input class='form-control' value='" + v.value + "'></div></div>";
                    })
                    $("#customAttributeItems").html(table2)

                    ///
                    var specificationItems = JSON.parse(goodsVO.specificationItems);
                    var div = "";
                    $(specificationItems).each(function (i, e) {

                        div += "<div><div class='col-md-2 title'>" + e.attributeName + "</div>";
                        div += "<div class='col-md-10 data'>" + e.attributeValue;
                        div += "</div></div>";
                    })
                    $("#specId").html(div);
                     //拼接库存
                    var  itemlist = map.itemList;
                    var  trList ="";
                    $(itemlist).each(function (i, e) {
                        var spec = JSON.parse(e.spec);
                        trList +="<tr><td>" + spec.网络 + "</td><td>" + spec.机身内存 +"</td><td>";
                        trList +="<input class='form-control'  value='" + e.price +"'>";
                        trList +="</td><td><input class='form-control' value='" + e.num + "'>";
                        trList +="</td><td><input type='checkbox' ></td><td><input type='checkbox' ></td></tr>";
                    })
                    $("#Kucun").html(trList);

                },
                error:function(){
                    alert("删除失败");
                }
            })
        }
	</script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
                    <div class="box-header with-border">
                        <h3 class="box-title">商品审核</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" onclick="deleteInfo()" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" onclick="status(1)" title="审核通过" ><i class="fa fa-check"></i> 审核通过</button>
                                        <button type="button" class="btn btn-default" onclick="status(2)" title="驳回" ><i class="fa fa-ban"></i> 驳回</button>
                                        <button type="button" class="btn btn-default"  onclick="window.location.reload();" title="刷新" ><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    商品名称：<input th:id="goodsName">
									<button class="btn btn-default" onclick="getData()">查询</button>
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">商品ID</th>
									      <th class="sorting">商品名称</th>
									      <th class="sorting">商品价格</th>
									      <th class="sorting">一级分类</th>
									      <th class="sorting">二级分类</th>
									      <th class="sorting">三级分类</th>
									      <th class="sorting">状态</th>									     						
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody th:id="goodsId">

			                      </tbody>
			                  </table>
			                  <!--数据列表/-->
							<!--<iframe width=100% height=20% marginwidth=0 marginheight=0 SRC="/goods/toPage"></iframe>-->
							 
                        </div>
                        <!-- 数据表格 /-->
                        
                        
                     </div>
                    <!-- /.box-body -->
  <!-- 编辑窗口 -->
  <div class="modal fade" id="insertEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" >
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel">商品详细</h3>
              </div>
              <div class="modal-body">
                  <!-- 正文区域 -->
                  <section class="content">

                      <div class="box-body">

                          <!--tab页-->
                          <div class="nav-tabs-custom">

                              <!--tab头-->
                              <ul class="nav nav-tabs">
                                  <li class="active">
                                      <a href="#home" data-toggle="tab">商品基本信息</a>
                                  </li>
                                  <li >
                                      <a href="#pic_upload" data-toggle="tab">商品图片</a>
                                  </li>
                                  <li >
                                      <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                                  </li>
                                  <li >
                                      <a href="#spec" data-toggle="tab" >规格</a>
                                  </li>
                              </ul>
                              <!--tab头/-->

                              <!--tab内容-->
                              <div class="tab-content">

                                  <!--表单内容-->
                                  <div class="tab-pane active" id="home">
                                      <div class="row data-type">
                                          <div class="col-md-2 title">商品分类</div>

                                          <div class="col-md-10 data">
                                              <table>
                                                  <tr><!--分类回显-->
                                                      <td id="category1Ids">
                                                      </td>
                                                      <td id="category2Ids">
                                                      </td>
                                                      <td id="category3Ids">
                                                      </td>

                                                  </tr>
                                              </table>

                                          </div>


                                          <div class="col-md-2 title">商品名称</div>
                                          <div class="col-md-10 data">
                                              <input type="text" class="form-control"  id="goodsName1"   placeholder="商品名称" value="">
                                          </div>

                                          <div class="col-md-2 title" >品牌</div>
                                          <div class="col-md-10 data">
                                              <input id="brand" class="form-control" style="border: 0px">
                                          </div>

                                          <div class="col-md-2 title">副标题</div>
                                          <div class="col-md-10 data">
                                              <input type="text" class="form-control" id="caption"   placeholder="副标题" value="">
                                          </div>

                                          <div class="col-md-2 title">价格</div>
                                          <div class="col-md-10 data">
                                              <div class="input-group">
                                                  <span class="input-group-addon">¥</span>
                                                  <input type="text" class="form-control"  id="price" placeholder="价格" value="">
                                              </div>
                                          </div>

                                          <div class="col-md-2 title editer">商品介绍</div>
                                          <div class="col-md-10 data editer">
                                              <span id="introduction"></span>
                                          </div>

                                          <div class="col-md-2 title rowHeight2x">包装列表</div>
                                          <div class="col-md-10 data rowHeight2x">
                                              <span id="packageList"></span>
                                          </div>

                                          <div class="col-md-2 title rowHeight2x">售后服务</div>
                                          <div class="col-md-10 data rowHeight2x">
                                              <span id="saleService"></span>
                                          </div>


                                      </div>
                                  </div>

                                  <!--图片上传-->
                                  <div class="tab-pane" id="pic_upload">
                                      <div class="row data-type">
                                          <!-- 颜色图片 -->
                                          <div class="btn-group">
                                              <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

                                          </div>

                                          <table  class="table table-bordered table-striped table-hover dataTable">
                                              <thead>
                                              <tr>

                                                  <th class="sorting">颜色</th>
                                                  <th class="sorting">图片</th>
                                                  <th class="sorting">操作</th>
                                              </thead>
                                              <tbody id="imgTemplate">

                                              </tbody>
                                          </table>

                                      </div>
                                  </div>


                                  <!--扩展属性-->
                                  <div class="tab-pane" id="customAttribute">
                                      <div class="row data-type" id="customAttributeItems">

                                      </div>
                                  </div>

                                  <!--规格-->
                                  <div class="tab-pane" id="spec">
                                      <div class="row data-type">
                                          <div class="col-md-2 title">是否启用规格</div>
                                          <div class="col-md-10 data">
                                              <input type="checkbox" >
                                          </div>
                                      </div>
                                      <p>



                                      <div class="row data-type" id="specId">

                                      </div>
                                      <div class="row data-type">
                                          <table class="table table-bordered table-striped table-hover dataTable">
                                              <thead>
                                              <tr>
                                                  <th class="sorting">屏幕尺寸</th>
                                                  <th class="sorting">网络制式</th>
                                                  <th class="sorting">价格</th>
                                                  <th class="sorting">库存</th>
                                                  <th class="sorting">是否启用</th>
                                                  <th class="sorting">是否默认</th>
                                              </tr>
                                              </thead>
                                              <tbody id="Kucun">


                                              </tbody>
                                          </table>

                                      </div>

                                  </div>
                              </div>

                          </div>
                          <!--tab内容/-->
                          <!--表单内容/-->

                      </div>







                  </section>
                  <div class="modal-footer">
                      <button class="btn btn-success"  data-dismiss="modal" aria-hidden="true">保存</button>
                      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                  </div>
              </div>
          </div>
      </div>


      <!-- 正文区域 /-->
      <script type="text/javascript">

          var editor;
          KindEditor.ready(function(K) {
              editor = K.create('textarea[name="content"]', {
                  allowFileManager : true
              });
          });

      </script>

      <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
      </div>
  </div>
  </div>
  </div>


</body>

</html>